<template>
    <div>
        <el-container>
            <el-header>百度地图</el-header>
            <el-container>
                <el-aside width="250px">
                    <el-row class="tac">
                        <el-col :span="24">
                            <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @select="pageJump"	 @open="handleOpen" @close="handleClose">
                                <el-submenu index="1" v-for="(item,index) in router">
                                    <template slot="title" >
                                        <i class="el-icon-message"></i>
                                        <span>{{item.name}}</span>
                                    </template>
                                    <el-menu-item :index="citem.path" v-for="(citem,cindex) in item.children">{{citem.name}}</el-menu-item>
                                </el-submenu>
                            </el-menu>
                        </el-col>
                    </el-row>
                </el-aside>
                <el-container>
                    <el-main>
                        <transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
                        <!-- <router-view></router-view> -->
                    </el-main>
                    <el-footer>Footer</el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    created(){
    var script = document.createElement("script");  
    script.src = "http://api.map.baidu.com/api?v=2.0&ak=9Vk20Pb7CsqZGaj7FG7nli0osFVvyeeP&callback=initialize";//此为v2.0版本的引用方式  
    document.body.appendChild(script);  
  },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        pageJump(index) {
            this.$router.push({ path: index });
        }
    }
}
</script>

<style lang="scss">
body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}


.el-header {
    background-color: #409EFF;
    color: #ffffff;
    line-height: 60px;
    font-size: 20px;
}

.el-footer {
    @extend .el-header;
    background-color: #B3C0D1;
}

.el-aside {
    background-color: #ffffff;
    color: #333;
    height: 800px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    line-height: 160px;
}
</style>

